<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>蜜读会员</title>
		<link rel="stylesheet" type="text/css" href="css/style.css?v=22323" />
		<link rel="stylesheet" type="text/css" href="css/aui.css?v=22323" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css?v=22323" />
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style>
			body,html{
				height:auto;
				padding-bottom: 3rem;
			}
			p,
			h2 {
				margin: 0;
			}
			
			body:before {
				border: 0;
				display: block;
				content: '';
			}
			
			.top {
				text-align: center;
				overflow: hidden;
				position: relative;
				border: 0;
			}


			.top h2 {
				font-size: 25px;
				font-weight: bold;
			}
			.open-type {
				padding: 0 1.5rem;
				border-radius: 8px;
				display: flex;
			}
			.open-type li {
				border-radius: 5px;
				line-height: 40px;
				-webkit-flex: 1;
				float: left;
				border:1px solid #eee;
				position: relative;
			}
			.open-type li:nth-child(2) {
				margin: 0 1rem;
			}
			.open-type div {
				text-align: center;
				height: 10rem;
			}
			.center_title{
				padding-left: 1.5rem;
				font-size: 1.8rem;
				color: #333;
				height: 8rem;
				line-height: 8rem;
				font-weight: bold;
			}
			
			.center .open-type .active {
				background: #fff7e5;
				border:1px solid #FFDA43;
			}
			.bottom {
				position: fixed;
				width: 100%;
				bottom: 0;
				left: 0;
				border-top: 1px solid #eee;
				text-align: center;
				z-index: 10;
				background: #Fff;
			}
			
			.hide {
				display: none;
			}
			.vipListData_img{
				float: left;
				margin: -1.2rem 0 0 -.5rem;
				width: 6.2rem;
				height: 2.4rem;
				position: absolute;
			}
			.vip_recommend{
				padding: 0 1.5rem;
			}

			.vip_equities>div{
				height: 6rem;
				line-height: 6rem;
				font-size: 1.8rem;
				color: #333333;
				padding-left: 1.5rem;
				font-weight: bold;
			}
			.vip_recommend li{
				width: 100%;
				height: 8.7rem;
				padding: 0 .8rem;
				overflow: hidden;
				display: flex;
				box-shadow: 0px 0px 20px 4px #eee;
				margin-bottom: 1rem;
				border-radius: 5px;
			}
			.vip_recommend img{
				float: left;
				margin-right: .3rem;
				width: 6rem;
				height: 6rem;
				margin-top: 1.2rem;
			}
			.vip_recommend div{
				-webkit-flex: 1;
				flex: 1;
			}
			.vip_recommend div h5{
				font-size: 1.4rem;
				color: #333;
				margin-top: 2.5rem;
				font-weight: normal;
				margin-bottom: .6rem;
			}
			.vip_recommend div p{
				font-size: 1.3rem;
				color: #999;
				height: 1.5rem;
			}
			.center_bot{
				padding: 0 1.5rem;
			}
			.center_bot > div{
				font-size: 1.8rem;
				color: #333;
				height: 1.5rem;
				margin: 2.7rem 0 2rem 0;
				font-weight: bold;
			}
			.center_bot p{
				font-size: 1.3rem;
				color: #999;
				line-height: 2.5rem;
			}
			.vip_btn{
				background: #fbd454;
				color: #333;
				height: 4rem;
				line-height: 4rem;
				font-size: 1.5rem;
				width: 90%;
				margin: .4rem auto;
				border-radius: 5px;
			}
		</style>
	</head>

	<body>

		<div class="top">
			<img src="img/midu_vip_img0.png" style="width: 100%;" alt="" />
		</div>
		<div class="center">
			<div class="center_title">开通听书VIP</div>
			<ul class="open-type not-free-open-type">
			</ul>
			<div class="vip_equities">
				<div>VIP权益</div>
				<ul class="vip_recommend">
					<li>
						<img src="icon/vip_icon_1.png" alt="">
						<div>
							<h5>会员包场 畅听全部内容</h5>
							<p>一键解锁2000集音频，500本好书</p>
						</div>
					</li>
					<li>
						<img src="icon/vip_icon_2.png" alt="">
						<div>
							<h5>每周至少上新7本听书</h5>
							<p>会员期内，即可免费享受所有上新的内容</p>
						</div>
					</li>	<li>
					<img src="icon/vip_icon_3.png" alt="">
					<div>
						<h5>专业团队上百小时打磨精品</h5>
						<p>全自主内容生产，保证内容的优质和独创</p>
					</div>
				</li>
				</ul>
			</div>
			<div class="center_bot">
				<div>
					VIP权益说明
				</div>
				<p>1. VIP服务：是虚拟内容服务产品，自行开通后不支持退款，请您谅解</p>
				<p>2. VIP用户：在会员有效期内，可领取任意听书音频和文稿</p>
				<p>3. 若开通后出现问题或体验服务有异常请联系蜜读客服，微信：midu0001</p>
			</div>
		</div>

		<div class="bottom">
			<div class="year-vip-btnContainer">
				<div class="col-xs-6 " style="height: 4.8rem;line-height: 4.8rem">
					<p style="font-size: 16px;" class="year-fee-container"></p>
				</div>
				<div class="col-xs-6" id="rechargeVip" style="font-weight: bold;">
					<p class="vip_btn">立即开通</p>
				</div>
			</div>
		</div>

		<!--回到首页-->
		<img class="backToHome hide" src="img/backToHome.png" style="width: 6.3rem; height: 4.9rem; bottom: 8.2rem; right: 0; position: fixed; z-index: 1000;"/>
	</body>
	<script type="text/html" id="vipListData">
		{{each data}}
		{{if $value.recommend==1}}
			<li class="open-type-item active" proId="{{$value.productId}}" data-recommend="{{$value.recommend}}" data-productname="{{$value.productName}}" activity_time="{{$value.activity_time}}" original_price="{{$value.originalPrice}}" price="{{$value.price}}">
				<img class="vipListData_img" src="img/vip_tejia.png" alt="">
				<div>
					<p style="line-height: 30px;font-size: 13px;margin: 1.8rem 0 1rem;color: #333333;font-weight: bold">{{$value.productName}}</p>
					<p style="line-height: 14px;font-size: 2.5rem;margin-bottom: 1rem;color:#fe9a35;"><span style="font-size: 1.3rem;margin-right: -.2rem">¥</span><span style="color:#fe9a35;font-weight:600;"> {{$value.price}}</span></p>
					<p style="line-height: 14px;font-size:11px;color:#999999;"><s>原价¥ {{$value.originalPrice}}</s></p>
				</div>
			</li>
		{{else}}
		<li class="open-type-item" proId="{{$value.productId}}" data-recommend="{{$value.recommend}}" data-productname="{{$value.productName}}" activity_time="{{$value.activity_time}}" original_price="{{$value.originalPrice}}" price="{{$value.price}}">
			<div>
				<p style="line-height: 30px;font-size: 13px;margin: 1.8rem 0 1rem;color: #333333;font-weight: bold">{{$value.productName}}</p>
				<p style="line-height: 14px;font-size: 2.5rem;margin-bottom: 1rem;color:#fe9a35;"><span style="font-size: 1.3rem;margin-right: -.2rem">¥</span><span style="font-weight:600;"> {{$value.price}}</span></p>
				<p style="line-height: 14px;font-size:11px;color:#999999;"><s>原价¥ {{$value.originalPrice}}</s></p>
			</div>
		</li>
		{{/if}}
		{{/each}}
	</script>

</html>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script src="js/purl.js"></script>
<script src="js/md5.js " type="text/javascript " charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	var toast = new auiToast();
	var shareBack=GetQueryString('shareBack')
	var originUserVip='';
	var showInviteMask=GetQueryString('showInviteMask')
	var merchant_id = GetQueryString('merchant_id');
	var timer1='';
	 $('.backToHome').click(function(){
	 	location.href = "index.html";
     })
	
	$(function() {
		if(showInviteMask==1){
			//禁止滑动
			document.body.style.overflow = 'hidden';
			window.addEventListener('touchmove',_preventDefault);
			$('#inviteMask').show()
		}
		$('#inviteMask').click(function(){
			//恢复滑动效果
			document.body.style.overflow = 'auto';
			window.removeEventListener('touchmove', _preventDefault);
			$(this).hide()
		})
		function _preventDefault(e){
			e.preventDefault();
		}
		$("#inviteRecord").click(function() {
			window.location.href = "inviteRecord.html";
		});
		var after1=function(){
			originUserVip = userVip;
			var userName=JSON.parse(sessionStorage.getItem('weixinData')).data.nickname


			shareWx(userName+'邀请你加入蜜读VIP，与1%的精英阅读者一起学习', 'vipShareLog.png', '每天半小时，听懂一本书');
			if(userVip.type==-1||userVip.type==1){
				$('.vip_btn').text('立即续费')
			}
		}
		getToken(after1);

		$('.open-type').on('click', 'li', function() {
			$('.open-type-item').removeClass('active')

			$(this).addClass('active')
			
			var item=$(this);
            $('.year-fee-container').html('<span style="font-size: 1.5rem">' + item.data('productname') +'</span><span style="font-weight: bold;font-size: 1.7rem;color: #fe9a35;">￥' + item.attr("price") + '</span>')

            if(item.attr('original_price') == 0){
					$('.year-fee-container s').addClass('hide')
				}else{
					$('.year-fee-container s').removeClass('hide')
				}
		})
		
		//获取vip列表
		var getVipList = function() {
			$.ajax({
				type: "get",
				url: hostUrl + 'product/vip/list',
				success: function(data) {
					data.data.forEach(function(item){
						if(item.recommend==1){
                            $('.year-fee-container').html('<span style="font-size: 1.5rem">' + item.productName + '</span><span style="font-weight: bold;font-size: 1.7rem;color: #fe9a35;">￥' +  item.price + '</span>')

							if (item.original_price == 0) {
								$('.year-fee-container s').addClass('hide')
							} else{
								$('.year-fee-container s').removeClass('hide')
							}

							
						}
					})
					var listHtml = template('vipListData', data);
					$('.not-free-open-type').html(listHtml)
				}
			});
		}
		getVipList()
		
		var getMyVip = function() {
			$.ajax({
				type: "get",
				url: hostUrl + 'product/vip/get?unionid='+unionid,
				success: function(data) {
					toast.hide();
					if(!data.data){
						return;
					}
					userVip=data.data;
					var weixinData=JSON.parse(sessionStorage.getItem('weixinData'));
					weixinData.data.userInfo.vip=userVip;
					sessionStorage.setItem('weixinData',JSON.stringify(weixinData))
					window.sessionStorage.setItem('userVip',JSON.stringify(userVip))
					
					$('.follow-code-container img').attr('src',weixinData.data.userInfo.headImgUrl)
					var beginTime=userVip.effect_time.replace(/-/g,'.')
					var endTime=userVip.expire_time.replace(/-/g,'.')
					$('.follow-code-container .time-text span').html('有效期至：'+endTime);
					
					if((originUserVip.type==-1&&userVip.type==1)||(originUserVip.type==1)){
						if (unionid2) {
							$('.share-get-container .follow-title').text('恭喜你续费成功')
						} else{
							$('.follow-code-container .follow-title').text('恭喜你续费成功')
						}
					}
				}
			});
		}

		
		$('#rechargeVip').on('click', function() {
			payClick(JSON.parse(window.sessionStorage.getItem("weixinData")), 7, $('.open-type-item.active').attr('proId'), false, merchant_id, getMyVip);
		})


	})

</script>